<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

var drag1 = false;
var drag2 = false;
var pos0;

jQuery(document).ready(function() {

  init();

  function init() {
    var win_w = $(window).width() - 30;
    var win_h = $(window).height() - 100; // - this.offsetTop;
    //var win_h = $(document).height();

    var left_w = 400; // default value of left pane.

    $("#container").width ( win_w );
    $("#container").height( win_h );

    $("#div1").width(left_w - 8);
    $("#div1").height(win_h / 2 - 15);

    $("#dragbar1").width(left_w + 2);

    $("#div2").width(left_w - 8);
    $("#div2").height(win_h / 2 - 15);

    $("#dragbar2").height( win_h );
    $("#dragbar2").offset({ left: left_w + 15 });

    $("#div3").offset({ left: left_w + 25 });
    $("#div3").width( win_w - (left_w + 30) );
    $("#div3").height( win_h - 15 );
  }

  $(window).resize(function() { init(); });

  $("#dragbar1").mousedown(function(e){
    drag1 = true;
    pos0 = e.pageY; 
  });

  $("#dragbar2").mousedown(function(e){
    drag2 = true;
    pos0 = e.pageX;
  });


  $(document).mousemove(function(e){
    var win_w = $(window).width() - 30;
    var win_h = $(window).height() - 100; // - this.offsetTop;

    if (drag1) {
        var v = e.pageY - pos0; 
        pos0 = e.pageY;

        var h1 = $("#div1").height() + v;
        //if ( h1 < 50 || h1 > 650 ) return;
        if ( h1 < 100 || h1 > win_h - 100 ) return;

        //$("#div1").css('height', ($("#div1").height() + v) + "px"); // This works too.
        //$("#div2").css('height', ($("#div2").height() - v) + "px");

        $("#div1").height($("#div1").height() + v);
        $("#div2").height($("#div2").height() - v);
    }

    if (drag2) {
        var v = e.pageX - pos0; 
        pos0 = e.pageX;

        var w1 = $("#div1").width() + v;
        //if ( w1 < 100 || w1 > 1050 ) return;
        if ( w1 < 100 || w1 > win_w - 100 ) return;

        //$("#div1").css('width', ($("#div1").width() + v) + "px"); // This works too.
        //$("#dragbar1").css('width', ($("#dragbar1").width() + v) + "px");
        //$("#div2").css('width', ($("#div2").width() + v) + "px");

        $("#div1").width($("#div1").width() + v);
        $("#dragbar1").width($("#dragbar1").width() + v);
        $("#div2").width($("#div2").width() + v);

        $("#dragbar2").offset({ left: $("#dragbar2").offset().left + v });

        $("#div3").width($("#div3").width() - v);
        $("#div3").offset({ left: $("#div3").offset().left + v });
    }
  });


  //$('#dragbar1').mouseup(function(e){
  //    drag1 = false;
  //});

  //$('#dragbar2').mouseup(function(e){
  //    drag2 = false;
  //});


  $(document).mouseup(function(e){
    drag1 = false;
    drag2 = false;
  });

});


</script>

</head>
<body>

<pre>
Div with scrollbars (Dynamic Scrollbar/ DHTML scrollbars): http://jsfiddle.net/gaby/Bek9L/186/
background image repeat:   http://www.w3schools.com/cssref/pr_background-repeat.asp
background image position: http://www.hscripts.com/tutorials/css/backp5.php
html layout with div: http://www.w3schools.com/html/html_layout.asp
</pre>

<div id="msg"></div>

<div id="container" style="position: absolute; left: 10px; border: solid; border-color: #eeeeee;">

<div id="leftpane" style="width:300px; float: left;">

<div id="div1" style="width:300px;height:350px;overflow:auto; padding: 5px;">

<hr width="400px;" align="left">

content goes here content goes here content goes here content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>


</div>

<!--/td><td-->

<div id="dragbar1" style="background-color:#eeeeee;  width: 300px; height: 10px; cursor: row-resize; 
background-image: url(handle-h.png); background-repeat: no-repeat; background-position: center; ">
</div>

<div id="div2" style="width:300px;height:350px;overflow:auto; padding: 5px;">

<hr width="400px;" align="left">

content goes here content goes here content goes here content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

</div>

</div> <!--end of left page-->

<div id="dragbar2" style="background-color:#eeeeee;  width: 10px; height: 700px; cursor: col-resize; 
background-image: url(handle-v.png); background-repeat: no-repeat; background-position: center; float: left; ">
</div>

<div id="div3" style="border: none; width: 800px; height: 700px; float: left; padding: 5px;">
d
</div>

</div> <!--end of container-->

</body>
</html>
